<template>
    <div>
        <!-- 文件上传部分 -->
        <el-upload class="uploadFile" :http-request="customUpload" accept=".pdf" multiple>
            <el-button type="primary">上传 PDF 文件</el-button>
        </el-upload>

        <!-- 文件列表展示 -->
        <el-table :data="fileList" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="name" label="文件名称"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="openPreview(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 文件预览对话框 -->
        <el-dialog v-model="dialogVisible" width="92%" title="PDF 文件预览">
            <el-row>
                <el-col :span="18">
                    <PdfViewer v-if="currentFile.url" :file-url="currentFile.url"></PdfViewer>
                </el-col>
                <el-col :span="6">
                    <el-form :model="form" style="margin-left: 10px;">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="标签">
                            <el-input v-model="form.tags"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, UploadRequestOptions } from 'element-plus';
import { uploadPicture } from '../../api/uploadApi';
import PdfViewer from '../../components/PdfViewer.vue';

interface FileItem {
    name: string;
    url?: string; // 可选，因为上传时还未有 URL
    type?: string;
    uid: string; // 保证文件唯一性
    status?: string;
    [key: string]: any; // 允许其他属性
}

const fileList = ref<FileItem[]>([]);
const dialogVisible = ref(false);
const currentFile = ref<FileItem>({
    name: '',
    url: '',
    type: '',
    uid: '',
    status: ''
});
const form = ref({
    remark: '',
    tags: '',
});

// 打开预览对话框
const openPreview = (file: FileItem) => {
    currentFile.value = file;
    dialogVisible.value = true;
};

// 提交表单
const submitForm = () => {
    // 这里可以添加实际的表单提交逻辑，例如调用 API 保存备注和标签
    ElMessage.success('表单已提交');
    dialogVisible.value = false;
};

// 自定义上传方法
const customUpload = async (options: UploadRequestOptions) => {
    const formData = new FormData();
    formData.append('file', options.file as File);

    try {
        const url = await uploadPicture(formData);
        ElMessage.success('上传成功');

        // 更新 fileList
        fileList.value.push({
            name: (options.file as File).name,
            url: url, // 后端返回的文件访问 URL
            type: (options.file as File).type,
            uid: (options.file as any).uid || Date.now().toString(), // 确保唯一性
            status: 'success',
        });
        console.log('fileList:', fileList.value);
        //console.log('fileList:', fileList.value[0].url);
        // 调用 onSuccess 回调，传递 URL
        options.onSuccess(url);
    } catch (error: any) {
        // 显示上传失败的消息
        ElMessage.error(error.message || '上传失败!');
        // 调用 onError 回调，传递错误对象
        options.onError(error);
    }
};

</script>

<style scoped>
.uploadFile {
    margin-bottom: 20px;
}
</style>